<template>
  <div class="vuePrintNb-container" id="NbAllPage">
    <div class="button-container">
      <el-button type="primary" class="common-button" v-print="'#NbImgPrint'">打印图片</el-button>
      <el-button type="primary" class="common-button" v-print="'#NbJsonPrint'">打印表格</el-button>
      <el-button type="primary" class="common-button" v-print="'#NbAllPage'">打印html</el-button>
    </div>
    <div class="img-container" id="NbImgPrint">
      <div v-for="item in 4">
        <img :src="Logo" alt="" class="logo-img">
      </div>
    </div>
    <div class="json-container" id="NbJsonPrint">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
      >
        <el-table-column label="活动" prop="title"></el-table-column>
        <el-table-column label="描述" prop="decs"></el-table-column>
        <el-table-column label="状态" prop="state"></el-table-column>
        <el-table-column label="活动时间" prop="created_at"></el-table-column>
      </el-table>
    </div>
    <div class="config-container">
      <div class="config-title">配置参数</div>
      <el-table
        :data="configData"
        border
        :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
      >
        <el-table-column label="属性" prop="params" width="200"></el-table-column>
        <el-table-column label="类型" prop="type" width="100"></el-table-column>
        <el-table-column label="默认值" prop="default" width="100"></el-table-column>
        <el-table-column label="必要" prop="necessary" width="100"></el-table-column>
        <el-table-column label="可选值" prop="options" width="100"></el-table-column>
        <el-table-column label="描述" prop="declare"></el-table-column>
      </el-table>
    </div>
    <div class="problem">
      存在的问题: 打印类型为html，表格的边框可能显示不全，需要在打印时设置表格边框线；宽度可能不够，需要对页面进行一定的缩放后打印
    </div>
  </div>
</template>

<script>
import logo from '@/assets/image/logo.png'
import { editTableData } from '@/mock/jsModule/table.js'
import variables from '@/styles/variables.scss'
export default {
  name: 'index',
  data(){
    return {
      Logo: logo,
    }
  },
  mounted(){
  },
  computed:{
    variables(){
      return variables
    },
    tableData(){
      var data = JSON.parse(JSON.stringify(editTableData))
      data = data.map(item =>{
        return {
          ...item,
          state: item.state == 1 ? '已开启' : '未开启'
        }
      })
      return data
    },
    configData(){
      const data = [
        {params: 'id', type: 'String',default: '-', necessary: '是', options: '-',declare: '范围打印 ID（如果设置url则可以不设置id）'},
        {params: 'url', type: 'String',default: '-', necessary: '否', options: '-',declare: '打印指定的 URL。（不允许同时设置ID）'},
        {params: 'popTitle', type: 'String',default: '-', necessary: '否', options: '-',declare: '默认使用浏览器标签名，为空时为undefined'},
        {params: 'standard', type: 'String',default: 'HTML5', necessary: '否', options: 'html5，loose，strict',declare: '打印的文档类型'},
        {params: 'extraHead', type: 'String',default: '-', necessary: '否', options: '-',declare: '在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点'},
        {params: 'extraCss', type: 'String',default: '-', necessary: '否', options: '-',declare: '新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点'},
        {params: 'openCallback', type: 'Function',default: '-', necessary: '否', options: '-',declare: '调用打印工具成功回调函数'},
        {params: 'closeCallback', type: 'Function',default: '-', necessary: '否', options: '-',declare: '关闭打印工具成功回调函数'},
        {params: 'beforeOpenCallback', type: 'Function',default: '-', necessary: '否', options: '-',declare: '调用打印工具前的回调函数'},
        {params: 'preview', type: 'Boolean',default: 'false', necessary: '否', options: 'true，false',declare: '预览工具'},
        {params: 'previewTitle', type: 'String',default: '-', necessary: '否', options: '-',declare: '打印预览'},
        {params: 'previewPrintBtnLabel', type: 'String',default: '打印', necessary: '否', options: '-',declare: '打印按钮名称'},
        {params: 'previewBeforeOpenCallback', type: 'Function',default: '-', necessary: '否', options: '-',declare: '预览打开前回调函数'},
        {params: 'previewOpenCallback', type: 'Function',default: '-', necessary: '否', options: '-',declare: '预览打开回调函数'},
        {params: 'clickMounted', type: 'Function',default: '-', necessary: '否', options: '-',declare: '点击打印按钮回调函数'},
      ]
      return data
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.vuePrintNb-container{
  text-align: left;
}
.img-container{
  margin-top: 20px;
  display: flex;
  .logo-img{
    width: 200px;
  }
}
.json-container{
  width: 100%;
  margin: 20px 0 ;
}
.config-title{
  margin: 20px 0 10px;
  font-weight: 700;
  color: $fontColor;
}
.problem{
  margin-top: 20px;
  background-color: $tipsBackground;
  border-left: 20px solid $greenColor;
  line-height: 30px;
  padding: 20px;
  color: $fontColor;
}
</style>
<style media="print" lang="scss">
// 修改页边距
@page {
  //size: auto;
  //margin: 3mm;
}
// 媒体查询， 打印时修改样式
@media print {
  #NbAllPage{
    width: 1200px;
    zoom: 0.8;
    margin: 0 auto;
  }
  .el-table{
    border: 3px solid #606060;
  }
  .el-table__header-wrapper {
    border-bottom: 3px solid #606060;
  }
  .el-table > .el-table__header-wrapper > .el-table__header > thead > tr > th{
    border-right: 3px solid #606060 !important;
  }
  .el-table > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > td{
    border-bottom: 3px solid #606060 !important;
    border-right: 3px solid #606060 !important;
  }
}
</style>
